<template>
  <div id="task-details">
    <el-drawer append-to-body v-model="drawer" :title="`出库任务【${taskInfo.taskId}】-拣选`" direction="rtl" size="50%">
      <el-card class="task-card" shadow="hover">
        <el-form ref="confirm" :model="taskData" :rules="confirmRules" class="task-form" label-position="right"
          label-width="100px">
          <el-form-item label="任务ID" prop="Id">
            <el-input v-model="taskData.taskId" disabled />
          </el-form-item>
          <el-form-item label="工单号" prop="workOrderNo">
            <el-input v-model="taskData.workOrderNo" disabled />
          </el-form-item>
          <el-form-item label="工单行号" prop="orderSn">
            <el-input v-model="taskData.orderSn" disabled />
          </el-form-item>
          <el-form-item label="托盘条码" prop="fromContNo">
            <el-input v-model="taskData.fromContNo" disabled />
          </el-form-item>
          <el-form-item label="物料编号" prop="spuNo">
            <el-input v-model="taskData.spuNo" disabled />
          </el-form-item>
          <el-form-item label="物料名称" prop="spuName">
            <el-input v-model="taskData.spuName" disabled />
          </el-form-item>
          <el-form-item label="计划数量" prop="planQty">
            <el-input v-model="taskData.planQty" disabled />
          </el-form-item>
          <el-form-item label="拣选数量" prop="actualQty">
            <el-input-number v-model="taskData.actualQty" :step="1" :min=0 :max=99999 />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="confirm">出库确认</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-drawer>
  </div>
</template>

<script setup name="OutConfirm">
import { getDeliverDetails } from "@/api/wms/deliverDetails.js";
import { data } from './index.js'
import { getTask ,confirmTaskWip} from "@/api/wms/task";
import { reactive, ref, onMounted } from 'vue';
import userUserStore from '@/store/modules/user'

const { proxy } = getCurrentInstance();
const userStore = userUserStore()
const emit = defineEmits(['refresh'])
let drawer = defineModel()

const props = defineProps({
  taskInfo: {
    type: Object,
    default: () => { }
  }
})

let taskData = ref({
  taskId: null,
  fromContNo: null,
  spuNo: null,
  spuName: null,
  planQty: null,
  actualQty: null,
  workOrderNo: null,
  orderSn: null,
  creator: null
});

// 使用计算属性创建 confirmParams
const confirmParams = computed(() => ({
  taskId: taskData.value.taskId,
  toContNo: null,
  outQty: taskData.value.actualQty,
  creator: userStore.id
}))


const confirmRules = {
  actualQty: [
    { required: true, message: "拣选数量不能为空", trigger: "blur" }
  ]
}

// 根据出库任务数据
function getTaskInfo() {
  console.log('获取任务详情,任务ID:', props.taskInfo.taskId);
  getTask(props.taskInfo.taskId).then((response) => {
    taskData.value = response.data;
    // 填充可拣选数量
  }).catch((error) => { });
}


// 入库登记(根据不同的单据类型调用不同的入库放行接口)
const confirm = () => {
  console.log('开始出库确认，作业内容:', confirmParams.value);
  confirmTaskWip(confirmParams.value).then((response) => {
    proxy.$modal.msgSuccess(response.msg);
    refresh();
  }).catch((error) => { })
}

const refresh = () => { emit('refresh') }

getTaskInfo();
</script>
